<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/person/fontawesome/css/font-awesome.css">
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }


    .head{
        height: 70px;
        position: relative;
        display: flex;
        align-items: center;
    }
    .head .title{
            margin-left: 20px;
    }
    .head .content{
        margin-left: 20px;
        font-size: 14px;
    }
    .head .content span{
        margin: 0px 5px 0px;
        color: red;
    }
.container{
    width: 100%;
    height: inherit;
    border-top: 2px dotted #ccc;
    border-bottom: 2px dotted #ccc;
    background-color: #f3f3f3;
}
    .container .content{
        display: flex;
        justify-content: center;
    }
    .container .content img{
        margin: 50px auto 50px;
        cursor: pointer;
    }
	.container .info span{
		display: inline-block;
		width: 200px;
		text-align: center;
	}

</style>
<body>
<div id="collect">
	<div class="head">
		<div class="title">
			<img src="/images/person/myBook.png" alt="">
		</div>
		<div class="content">共<span>{{total[0]}}</span>部作品</div>
	</div>
	
	<div class="container">
		<ul class="collect">
			<li v-for="c in collectList">
				<div class="info" style="border:1px #2ab69d;padding: 3px">
					<span>
						<a :href="'http://localhost:9999/comicDetail?id='+c.id">
							<img :src="'http://localhost:8081/imgs/resource/'+c.id+'/'+c.cover" width="50px" height="67px"/>
						</a>
					</span>
					<span>{{c.writer}}</span>
					<span>{{c.sname}}</span>
				</div>
			
			</li>
		</ul>
	</div>
	
</div>



<script th:inline="javascript">
	var userInfo = [[${session.loginUser}]]
</script>

<script>
 let collectApp = new Vue({
	 el:"#collect",
	 data:{
		collectList:[],
		total:'',
		uid:userInfo.id,
		userInfo:''
	 },
	 methods:{
		 getCollectList(){
			 let url = 'http://localhost:9999/resource/getPersonCollect'
			 axios.get(url,{
				 params:{
					 uid:this.uid
				 }
			 }).then((resp)=>{
				 this.collectList=resp.data.data
			 })
		 },
		 getCollectTotalList(){
			 let url = 'http://localhost:9999/resource/getPersonCollectTotal'
			 axios.get(url,{
				 params:{
					 uid:this.uid
				 }
			 }).then((resp)=>{
				 this.total=resp.data.data
			 })
		 },
	 },
	 created(){
		 this.getCollectList();
		 this.getCollectTotalList()
	 }
 })
</script>
</body>
</html>